<template>
<el-form class="form-area" label-width="80px" :model="myForm" ref="myForm" :rules="rules">
	<el-row>
		<el-col>
			<el-form-item label="用户名：" prop="name">
				<el-tooltip content="用户名字母开头,只能包含字母、数字或下划线" effect="light" placement="top-start">
					<el-input v-model="myForm.name" placeholder="请输入用户名" clearable></el-input>
				</el-tooltip>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col>
			<el-form-item label="密码：" prop="pwd">
				<el-tooltip content="密码8到16位,只能包含字母、字符和数字" effect="light" placement="top-start">
					<el-input v-model="myForm.pwd" placeholder="请输入密码" type="password" clearable></el-input>
				</el-tooltip>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col>
			<el-form-item label="邮箱：" prop="email">
				<el-input v-model="myForm.email" placeholder="请输入邮箱" type="email" clearable></el-input>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col>
			<el-form-item label="手机号：" prop="phone">
				<el-input v-model="myForm.phone" placeholder="请输入手机号" clearable></el-input>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col>
			<el-form-item label="部门：" prop="depart">
				<el-select v-model="myForm.depart" placeholder="请选择部门" class="select-depart" clearable>
				  <el-option v-for="(item,index) in department" :key="index" :label="item" :value="item"></el-option>
				</el-select>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col>
			<el-form-item label="类型：" prop="sortArr">
				<el-checkbox-group v-model="myForm.sortArr">
					<el-checkbox v-for="(item,index) in sortList" :label="item" :key="index">{{item}}</el-checkbox>
				</el-checkbox-group>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
		<el-col>
			<el-form-item label="种类：" prop="manyArr">
				<el-radio-group v-model="myForm.manyArr">
					<el-radio v-for="(item,index) in manyList" :label="item" :key="index">{{item}}</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-col>
	</el-row>
	<el-row>
	  <el-col>
		  <el-form-item label="日期：" prop="date">
			  <el-date-picker v-model="myForm.date" type="datetime" placeholder="选择日期时间"></el-date-picker>
		  </el-form-item>
	  </el-col>
	</el-row>
	<el-row>
		<el-form-item label="头像：" prop="imageUrl">
			<el-upload
				class="avatar-uploader"
				action="https://jsonplaceholder.typicode.com/posts/"
				:show-file-list="false"
				:on-success="handleAvatarSuccess"
				:before-upload="beforeAvatarUpload">
				<img v-if="myForm.imageUrl" :src="myForm.imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-form-item>
	</el-row>
	<el-row>
	  <el-col>
		  <el-button type="primary" class="submit-btn" @click="submitForm">提交</el-button>
	  </el-col>
	</el-row>
</el-form>
</template>
<script>
import {validateEmail,validatePhone} from "@/utils/validate"
export default {
  name: 'myForm',
  data(){
	const validEmail = (rule, value, callback)=>{
		if(!value){
			callback(new Error('请输入邮箱！'));
		}else if(validateEmail(value)){
			callback();
		}else{
			callback(new Error('请输入正确的邮箱格式！'));
		}
	};
	const validPhone = (rule, value, callback)=>{
		if(!value){
			callback(new Error('请输入手机号'));
		}else if(validatePhone(value)){
			callback();
		}else{
			callback(new Error('请输入正确的手机号！'));
		}
	};
	return{
		myForm:{
			sortArr:[]
		},
		sortList:["大","小","长","短","高","低","胖","瘦"],
		manyList:['小学','中学','大学','硕士','博士'],
		department:['一部','二部','三部','四部','五部'],
		rules:{
			name:[
				{required: true, message: '请输入用户名', trigger: 'blur'}
			],
			pwd:[
				{required: true, message: '请输入密码', trigger: 'blur'}
			],
			email:[
				{required: true,  validator:validEmail,trigger: 'blur'}
			],
			phone:[
				{required: true, validator:validPhone,trigger: 'blur'}
			],
			sortArr:[
				{required: true, message: '请选择类型', trigger: 'change'}
			],
			manyArr:[
				{required: true, message: '请选择种类', trigger: 'change'}
			],
			depart:[
				{required: true, message: '请选择部门', trigger: 'change'}
			],
			date:[
				{required: true, message: '请选择时间', trigger: 'blur'}
			],
		},
	}
  },
  methods:{
	  validForm(){
		  return new Promise((resolve, reject)=>{
			this.$refs.myForm.validate(valid =>{
				resolve(valid);
			});
		  });
	  },
	  submitForm(){
		  this.validForm().then(valid =>{
			  if(valid){
				  console.log('submit success')
			  }else{
				  console.log('submit error');
			  }
		  });
	  },
	  handleAvatarSuccess(res, file) {
        this.myForm.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
}
</script>
<style lang="scss">
.form-area{
	.submit-btn{
		span{
			color:#FFF;
		}
	}
	width:50%;
	.avatar-uploader{
		.el-upload{
			border-radius: 6px;
			cursor: pointer;
			position: relative;
			overflow: hidden;
			border: 1px dashed #d9d9d9;
		}
	}
}
</style>
<style lang="scss" scoped>
.form-area{
	.el-row{
		margin:0 20px;
	}
	margin-top:100px;
	.submit-btn{
		margin-left:80px;
	}
	.select-depart{
		width:100%;
	}
	.avatar-uploader{
		.el-icon-plus{
			width:100px;
			height:100px;
			line-height: 100px;
    		text-align: center;
		}
		.avatar {
			width: 100px;
			height: 100px;
			display: block;
		}
	}
}
</style>